import React, { useEffect, useState, Component } from 'react';
import styles from './index.less';
import { request } from '@/utils/request';
import { connect } from 'dva';
import { Link, history, Redirect } from 'umi';
import {
  Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification,InputNumber,
  Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined } from '@ant-design/icons';

import closeImg from '../../images/bigscreen/close.png';
import modalbg from '../../images/bigscreen/modalbg.png';

export default (props) => {
  const {style:{width, height, top, left, bottom, right}, visible ,mask, title} = props;
  const [visibleMy , setVisibleMy] = useState(true)
  let distanceStyle = {}
  if (!(top || left || bottom || right)){
    distanceStyle = {
      top: 20,
      bottom: 0,
      left: 0,
      right: 0,
    }
  } else {
    distanceStyle = {
      top: top || 20,
      bottom: bottom || 'unset',
      left: left || 'unset',
      right: right || 'unset',
    }
  }
  const wrapStyle = {
    width: width ? width+'px' :'500px',
    height: height? height+'px': '500px',
    position: 'absolute',
    backgroundImage:`url(${modalbg})`,
    backgroundRepeat:'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: '100% 100%',
    margin: 'auto',
    ...distanceStyle,
  }
  const closeStyle = {
    // position:'absolute',
    // top: '0px',
    // right:'0px',
    cursor:'pointer',
    zIndex:1,
    width:'60px',
    height: '60px'
  }
  return (
    <>
      {
        visible && 
        <div className={styles.myModal} style={{width: '100%', height: '100%', background: mask? '#000000a0': '#00000000', position:mask?'fixed':'absolute',top:0,left:0}}>
            <div style={wrapStyle}>
              <div className={styles.title}>
                <span>{title || ''}</span>
                <img src={closeImg} style={closeStyle} onClick={() => props.onClose()}></img>
              </div>
              <div className={styles.container}>
                {props.children}
              </div>
            </div>
        </div>
      }
    </>
  )
}